<template>
	<view class="user">
		<block v-if="login">
			<view class="center">
				<view class="logo">
					<view class="img">
						<image class="logo-img" :src="userInfo.userUrl"></image>
					</view>
					<view class="logo-title">
						<text class="uer-name">{{userInfo.userName}}</text>
					</view>
					<view class="signDay cu-tag light bg-yellow round padding-lr-xs">{{signDay}}天</view>
				</view>
				<view class="menu">
					<view class="padding-xs shadow bg-white round lg margin-lr-lg body">
						<view class="cu-list menu sm-border margin-top menu-list">
							<view class="cu-item arrow" @click="goSetting">
								<view class="content">
									<text class="cuIcon-edit text-grey"></text>
									<text class="text-grey">资料修改</text>
								</view>
							</view>
							<view class="cu-item arrow" @click="goCollection">
								<view class="content">
									<text class="cuIcon-text text-grey"></text>
									<text class="text-grey">我的收藏</text>
								</view>
							</view>
							<view class="cu-item arrow" @click="goTable">
								<view class="content">
									<text class="cuIcon-circlefill text-grey"></text>
									<text class="text-grey">我的计划</text>
								</view>
							</view>
							<view class="cu-item arrow" @click="setKcal">
								<view class="content">
									<text class="cuIcon-hot text-grey"></text>
									<text class="text-grey">日消耗千卡</text>
								</view>
								<view class="action">
									<text class="text-grey text-sm kcal-num">{{userInfo.userKcal}}千卡</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<empower @wxGetUserInfo="getUserInfo"></empower>
		</block>

		<modal :show="showSetKcal" @click="SetKcalclickHander" @cancel="hideSetKcal" :custom="true" :fadein="true">
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">自定义千卡</view>
				<input placeholder="请输入千卡" class="tui-input" v-model="kcal" style="height: 50rpx;" />
			</view>
		</modal>
	</view>
</template>

<script>
	let that = null;
	import empower from '../../components/empower/empower.vue'
	import modal from '../../components/modal/modal.vue';
	export default {
		components: {
			empower,
			modal
		},
		data() {
			return {
				login: false,
				userInfo: {},
				showSetKcal: false,
				kcal: 100,
				signDay: 0,
				sign: null
			};
		},
		onLoad() {
			that = this;
			if (this.$db.get('token')) {
				this.login = true
			} else {
				uni.login({
					success(res) {
						if (res.code) {
							that.wxLoginStep(res.code)
						} else {
							that.$comm.errorToShow('未取得code')
						}
					},
					fail() {
						that.$comm.errorToShow('获取code失败')
					}
				})
			}
		},
		onShow() {
			if (this.login) {
				this.initUserInfo()
			}
		},
		methods: {
			goSetting() {
				this.$comm.navigateTo('/pages/setting/setting')
			},
			goTable(){
				this.$comm.navigateTo('/pages/table/table')
			},
			setKcal() {
				this.kcal = this.userInfo.userKcal
				this.showSetKcal = true
			},
			hideSetKcal() {
				this.showSetKcal = false
			},
			SetKcalclickHander(e) {
				if (e.index == 1) {
					this.$api.UpdateUserByIdKcal({
						userKcal: this.kcal
					}).then(res => {
						if (res.code) {
							this.$comm.successToShow("修改成功")
							this.userInfo.userKcal = this.kcal
							this.$store.dispatch('setUserInfoAction', this.userInfo)
						}
						this.hideSetKcal()
					})
				} else {
					this.hideSetKcal()
				}
			},
			wxLoginStep(code) {
				this.$api.login({
					code
				}).then(res => {
					if (res.code) {
						that.Token = res.data.Token;
					} else {
						this.$comm.errorToShow("获取openID异常", function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			getUserInfo(res) {
				if (!this.Token) {
					uni.showToast({
						icon: 'none',
						title: '正在加载中，稍等一下',
						duration: 2000
					});
					return
				}
				if (res.detail.errMsg == 'getUserInfo:fail auth deny') {
					that.$comm.errorToShow('授权失败')
				} else {
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							infoRes.userInfo.Token = that.Token;
							that.toWxLogin(infoRes.userInfo)
						}
					});
				}
			},
			toWxLogin(data) {
				let _this = this
				_this.$api.upinfoLogin(data).then(res => {
					if (res.code) {
						_this.$comm.successToShow("登录成功", () => {
							_this.login = true;
							_this.userInfo = res.data[0];
							_this.$store.dispatch('setUserInfoAction', res.data[0])
							_this.$store.dispatch('saveUserTokenAction', _this.Token)
							_this.initData()
						})
					} else {
						_this.$comm.errorToShow('登录失败，请重试')
					}
				})
			},
			initUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						that.$api.userInfoInit(infoRes.userInfo).then(res => {
							if (res.code) {
								that.userInfo = res.data[0];
								that.$store.dispatch('setUserInfoAction', that.userInfo)
								that.initData()
							} else {
								that.$comm.errorToShow('更新信息失败，请重试')
							}
						})
					},
					fail(res) {
						that.login = false
						uni.login({
							success(res) {
								if (res.code) {
									that.wxLoginStep(res.code)
								} else {
									that.$comm.errorToShow('未取得code')
								}
							},
							fail() {
								that.$comm.errorToShow('获取code失败')
							}
						})
					}
				});
			},
			initData() {
				this.$api.getSign().then(res => {
					if (res.code) {
						this.sign = res.data
						this.signDay = res.signDay
						this.userInfo = Object.assign(this.userInfo, {
							sign: this.sign,
							signDay: this.signDay,
							isSign: res.isSign
						})
						this.$store.dispatch('setUserInfoAction', that.userInfo)
					}
				})
			},
			goCollection() {
				this.$comm.navigateTo("/pages/collection/collection")
			}
		}
	}
</script>

<style lang="scss">
	// page,
	// view {
	// 	display: flex;
	// }

	.tui-modal-custom {
		text-align: center
	}

	.tui-modal-custom-text {
		font-size: 30rpx;
		color: #333;
		padding: 30rpx 0
	}

	.tui-prompt-title {
		padding-bottom: 20rpx;
		font-size: 34rpx;
	}

	.tui-input {
		margin: 30rpx 40rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding-bottom: 20rpx;
		font-size: 32rpx;
	}

	.signDay {
		width: 80rpx;
		height: 40rpx;
	}

	.poster {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 400upx;
		padding: 20upx;
		padding-left: 40upx;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.img {
		border: 1rpx solid rgba($color: #000000, $alpha: 0.3);
		border-radius: 150upx;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
		margin: 10upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.kcal-num {
		color: rgb(60, 105, 145);
		font-size: 26rpx;
		position: relative;
		right: -20upx;
	}

	.uer-name {
		height: 60upx;
		// line-height: 60upx;
		font-size: 32upx;
		color: #000000;
		// font-weight: bold;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.menu {
		margin: 0rpx auto;

		.body {
			width: 90vw;
			border-radius: 40rpx;
			min-height: 40vh;

			.menu-list {
				width: 100%;
			}
		}
	}
</style>
